﻿<!DOCTYPE html>
<html> 
<head> 
	<title>Home System</title>
  <meta name="HandheldFriendly" content="true">
	<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1"> 
	<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
  <script>
    var now = new Date()/1000;
    var time_min = Math.round((now - 1800)/1800) * 1800;
    var total_height;

    $(window).scroll(function(){
      $('#timeline').css('left', 300 - ($(window).scrollLeft())+'px');
      $('#channel_list').css('top', 30 - ($(window).scrollTop())+'px');
    });
    
    $(document).ready(function(){
      jQuery.get("/HSA/execute?name=tv&msg=get_channels", function(data){
        var names = new Array();
        var channels = new Array();
        $(data).find("a").each(function(){
          if ($(this).attr("n") == "name"){
            $(this).find("e").each(function(){
              names.push($(this).text());
            });
          } else if ($(this).attr("n") == "channel"){
            $(this).find("e").each(function(){
              channels.push($(this).text());
            });
          }
        });
        $channel_list = $("#channel_list");
        for (var i = 0; i < channels.length; ++i){
          $('<div />')
            .text(channels[i] + ". " + names[i])
            .attr('class', 'channel')
            .appendTo($channel_list);
        }
        var time_max = time_min;
        var channel_to_proc = 100;
        for (var i = 0; i < 100; ++i){
          var datatosend = "<hsd><p n=\"channel\" t=\"i\">" + channels[i] + "</p></hsd>";
          jQuery.post("/HSA/execute?name=tv&msg=get_epg_data", datatosend, function(data){
            var channel;
            var event_num;
            $(data).find("p").each(function(){
              if ($(this).attr("n") == "channel"){
                channel = $(this).text();
              } else if ($(this).attr("n") == "event_num"){
                event_num = parseInt($(this).text());
              }
            });
            if (event_num > 0){
              var event_names = new Array();
              var start_times = new Array();
              var durations = new Array();
              $(data).find("a").each(function(){
                if ($(this).attr("n") == "name"){
                  $(this).find("e").each(function(){
                    event_names.push($(this).text());
                  });
                } else if ($(this).attr("n") == "start_time"){
                  $(this).find("e").each(function(){
                    start_times.push(parseInt($(this).text()));
                  });
                } else if ($(this).attr("n") == "duration"){
                  $(this).find("e").each(function(){
                    durations.push(parseInt($(this).text()));
                  });
                }
              });
            
              $event_list = $("#event_list");
              for (var j = 0; j < event_names.length; ++j){
                var event_end = start_times[j] + durations[j];
                if ( event_end > time_max){
                  time_max = event_end;
                }
                if (event_end > time_min){
                  var width = durations[j]/10;
                  var left = 300 + ((start_times[j] - time_min)/10);
                  if (left < 300){
                    width -= 300 - left;
                    left = 300;
                  }  
                  $('<div />')
                    .text(event_names[j])
                    .attr('class', 'event')
                    .css({
                      top:  ((channel - 1) * 30 + 30) + 'px',
                      left: left + 'px',
                      width: width + 'px'
                    })
                    .appendTo($event_list);
                }
                
              }
            } else {
              $('<div />')
                .text("No data available")
                .attr('class', 'no_event')
                .css('top', ((channel - 1) * 30 + 30) + 'px')
                .appendTo($("#event_list"));

            }
            channel_to_proc--;
            if (channel_to_proc <= 0){
              // timeline drawing
              console.log(new Date(time_min * 1000).toString());
              console.log(new Date(now * 1000).toString());
              console.log(new Date(time_max * 1000).toString());

              // now line
              total_height = 30 * channels.length + 30;
              drawNow();


              $timeline = $("#timeline");
              for (var z = time_min; z < time_max; z += 900){
                var tz = new Date(z*1000);
                $('<div />')
                  .text(tz.getHours() + ":" + tz.getMinutes())
                  .attr('class', 'time')
                  .css('left', ((z - time_min)/10) + 'px')
                  .appendTo($timeline);
              }
            }
          });
        }
      });
    });

    window.setInterval(drawNow, 60000);

    function drawNow(){
      now = new Date()/1000;
      $('#now').css({
        left: (300 + ((now - time_min)/10)) + 'px',
        height: total_height + 'px'
      });
    }
  </script>
  <style>
    html, body {
    	height: 100%;
    	margin: 0;
    }
    #header {
      position: fixed;
      height: 30px;
      width: 300px;
      background: yellow;
      z-index: 4;
    }
    #timeline {      
      position: fixed;
      left: 300px;
      height: 30px;
      background: green;
      z-index: 3;
    }
    #channel_list {
      position: fixed;
      top: 30px;
      width: 300px;
      background: red;
      z-index: 2;
    }
    #event_list {
      position: relative;
      background: blue;
    }
    .channel {
      height: 30px;
    }
    .event {
      position:absolute;
      height: 30px;
      border-style: solid;
      overflow: hidden;
    }
    .no_event {
      position: absolute;
      left: 300px;
      height: 30px;
      width: 400px;
    }
    #now {
      position: absolute;
      top: 0px;
      width: 0px;
      border-style: solid;
      border-color: red;
      z-index: 5;
    }
    .time {
      position: absolute;
      width: 90px;
      top: 0px;
      background: purple;
      height: 30px;
    }
    
  </style>
</head>

<body>
  <div id="header">header</div>
  <div id="timeline"></div>
  <div id="channel_list"></div>
  <div id="event_list"></div>
  <div id="now"></div>
</body>
</html>
